<template lang="pug">
.cp-product-risk-popup
  el-dialog.risk-pop(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    :close-on-click-modal="!isEdit",
    width="40%")
    el-form.risk-pop-form(:model="formData", label-width="160px", label-position="right")
      el-form-item(label="Risk ID")
        el-input(v-model="formData.id", placeholder="自动生成ID", disabled)
      el-form-item(label="状态")
        el-select(v-model="formData.status", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="标签")
        el-input(v-model="formData.tag", placeholder="请输入", :disabled="!isEdit")
      el-form-item(label="功能")
        el-input(v-model="formData.feature", placeholder="请输入", :disabled="!isEdit")
      el-form-item(label="危害")
        el-input(v-model="formData.harm", placeholder="请输入", :disabled="!isEdit")
      el-form-item(label="可预见的事件序列")
        el-input(v-model="formData.expected", placeholder="请输入", :disabled="!isEdit")
      el-form-item(label="危险处境")
        el-input(v-model="formData.dangerous", placeholder="请输入", :disabled="!isEdit")
      el-form-item(label="可能引起的损害")
        el-input(v-model="formData.damage", placeholder="请输入", :disabled="!isEdit")
      el-form-item(label="影响")
        el-select(v-model="formData.effect", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="实施措施前严重程度")
        el-select(v-model="formData.prevSeverity", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="实施措施前出现概率")
        el-select(v-model="formData.prevProbability", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="实施措施前风险范围")
        el-select(v-model="formData.prevRange", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="措施类型")
        el-select(v-model="formData.measureType", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="风险需求ID")
        el-input(v-model="formData.riskReqId", placeholder="请输入", :disabled="!isEdit")
      el-form-item(label="措施")
        el-input(v-model="formData.measure", placeholder="请输入", :disabled="!isEdit")
      el-form-item(label="剩余风险评估严重程度")
        el-select(v-model="formData.laveSeverity", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="剩余风险评估出现概率")
        el-select(v-model="formData.laveProbability", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="剩余风险评估风险范围")
        el-select(v-model="formData.laveRange", :disabled="!isEdit")
          el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="下分模块")
        el-select(v-model="formData.module", :disabled="!isEdit")
          el-option-group( v-for="group in moduleSelect", :key="group.name", :label="group.name")
            el-option(v-for="item in group.options", :key="item.value", :label="item.name", :value="item.value")
    .dialog-footer(slot="footer")
      el-button(type="primary", plain, @click="closeDialog") 取消
      el-button(type="primary", @click="saveBill", v-if="isEdit", :disabled="saving") 保存
      el-button(type="primary", @click="submitBill", v-if="isEdit", :disabled="submitting") 提交
</template>

<script>
export default {
  name: 'proriskpopup',
  components: {
  },
  props: {
    title: String,
    visible: Boolean,
    isEdit: Boolean,
    parentData: Object
  },
  data() {
    return {
      // 新建时初始数据
      formData: this.parentData,
      saving: false,
      submitting: false,
      // 下拉框选项
      emptySelect: [],
      moduleSelect: [{
        name: '系统',
        options: [{
          value: 'Q',
          name: '系统'
        }]
      }, {
        name: '模块A',
        options: [{
          value: 'A1',
          name: '模块A1'
        }, {
          value: 'A2',
          name: '模块A2'
        }]
      }, {
        name: '模块B',
        options: [{
          value: 'B1',
          name: '模块B1'
        }, {
          value: 'B2',
          name: '模块B2'
        }]
      }, {
        name: '模块C',
        options: [{
          value: 'C1',
          name: '模块C1'
        }, {
          value: 'C2',
          name: '模块C2'
        }]
      }]
    };
  },
  watch: {
    parentData(newData, oldData) {
      if (newData !== oldData) {
        this.formData = newData;
      }
    }
  },
  created() {
  },
  methods: {
    // 关闭、取消
    closeDialog() {
      this.$emit('close');
    },
    // 保存
    saveBill() {
      if (this.saving) {
        return false;
      }
      this.saving = true;
      // const params = { ...this.formData };
      setTimeout(() => {
        if (Math.random() > 0.5) {
          this.$emit('submit', {});
          this.closeDialog();
          this.$message({ message: '保存成功', type: 'success' });
          this.saving = false;
        } else {
          this.$message.error('保存失败');
          this.saving = false;
        }
      }, 500);
    },
    // 提交
    submitBill() {
      if (this.submitting) {
        return false;
      }
      this.submitting = true;
      // const params = { ...this.formData };
      setTimeout(() => {
        if (Math.random() > 0.5) {
          this.$emit('submit', {});
          this.closeDialog();
          this.$message({ message: '提交成功', type: 'success' });
          this.submitting = false;
        } else {
          this.$message.error('提交失败');
          this.submitting = false;
        }
      }, 500);
    }
  }
};
</script>

<style lang="sass">
$SEARCHHEIGHT: 104px
$SELECTWIDTH: 100px
.cp-product-risk-popup
  .risk-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .risk-pop-form
    .el-form-item
      width: 100%
      height: 34px
      margin-right: 0
    .el-select, .el-date-editor.el-input
      width: 100%
</style>
